/**
 * @license AxureMeasure v0.1.0
 * Author: WaveF
 */
(function(){

    checkObjectExist('$', function(){
        checkElementExist($('.ElementPropertiesSidebarModule'), ()=>{ setTimeout(styling, 500); });
    });

    function styling() {
        // console.clear();

        var BLUE     = '#02B4FF';
        var ORANGE   = '#e89a28';
        var GREEN    = '#4edec2';
        var GREY     = '#343B57';
        var DARKGREY = '#161A31';

        insertStyle(`
            * { trnasition:.5s; }
            .PrimaryControlsModule__control { border-radius: 0; }
            .PrimaryControlsModule__control:hover { background-color: rgba(78,222,194,.2) !important; }
            .ElementPropertiesSidebarModule .InputComponent, .ElementPropertiesSidebarModule .TextAreaComponent { margin-top: 12px; }
            .InputComponent__label { color: rgba(255,255,255,.5); margin-bottom: 5px; }
            .InputComponent__input { cursor: pointer; color: #fff; font-size: 14px; border-radius: 0; background-color: rgba(250,250,255,.1) !important; transition: .3s; }
            .TextAreaComponent__label { color: rgba(255,255,255,.5); }
            .TextAreaComponent__textarea { cursor: pointer; color: #fff; font-size: 14px; background-color: rgba(250,250,255,.1); border-radius: 0; margin-top: 5px; }
            .InputComponent__input:hover { background-color: rgba(250,250,255,.3) !important; }
            .ColorSwatchComponent { border: 0; width: 10px; height: 10px; border-radius: 5px; bottom: 3px; right: 6px; }
            .ElementPropertiesSidebarModule__pseudo-tabs--header { background-color: ${GREY}; }
            .ElementPropertiesSidebarModule__pseudo-tabs--tab-active { color: #fff; border-color: ${GREY}; background-color: #232943; }
            .ElementPropertiesSidebarModule__pseudo-tabs--body { border-top: solid 1px ${GREY}; }
            .ElementPropertiesSidebarModule__pseudo-tabs--body p { color: ${GREEN}; margin-top: 30px; font-weight: 700; }
            .ElementPropertiesSidebarModule__side-pull { border-radius: 0; }
            .ElementPropertiesSidebarModule__side-pull > span { background-color: ${GREEN}; }
            .ElementPropertiesSidebarModule { background-color: #232943; }
            .ElementPropertiesSidebarModule__grid-overlay { border-top: solid 1px rgba(255,255,255,.1); }
            .ArtboardModule { background-color: ${DARKGREY}; }
            .HeaderModule { background-color: ${GREY} }
            .ZoomControlModule { border-radius: 0; box-shadow: none; left: 60px; bottom: 60px; transition: .3s; }
            .ZoomControlModule__zoom-input { color: #fff; background-color: ${GREY}; }
            .ZoomControlModule__zoom-control { background-color: ${GREY}; }
            .ZoomControlModule__zoom-control--positive,
            .ZoomControlModule__zoom-control--negative { border: 0; outline: 0; border-radius: 0; transition: .3s; }
            .ZoomControlModule__zoom-control--positive span,
            .ZoomControlModule__zoom-control--negative span { background-color: ${GREEN}; opacity: .5; transition: .3s; }
            .ZoomControlModule__zoom-control--positive:hover,
            .ZoomControlModule__zoom-control--negative:hover { background: #2A6165; }
            .ZoomControlModule__zoom-control--positive:hover span,
            .ZoomControlModule__zoom-control--negative:hover span { opacity: 1; }
            .ModalComponent__modal { background-color: ${DARKGREY}; }
            .SharingLinksModule__modal-block h1 { color: ${GREEN}; }
            .SharingLinksModule__modal-block .InputComponent__label { color: rgba(255,255,255,.5) !important; font-size: 12px !important; }
            .SharingLinksModule__modal-block .InputComponent__input { border-radius: 0; font-size: 14px; }
            .ButtonComponent { border-radius: 0; color: ${DARKGREY}; font-size: 14px; }
            .TooltipComponent { border-radius: 0; }
            .ModalComponent__modal-close { top: 40px; right: 30px; outline: 0; }
            .ModalComponent__modal-close:hover div,
            .ModalComponent__modal-close:hover div::after { background: ${GREEN}; transition: 0s; }
            .ModalComponent__modal-close div,
            .ModalComponent__modal-close div::after { background-color: rgba(255,255,255,.5); }
            .CheckboxComponent__label { color: ${GREEN}; }
            .DimensionMarkerComponent { border-radius: 0; }
            .SplashScreenModule { color: rgba(255,255,255,.5); }
            .CodeBadgeComponent { background-color: ${GREEN}; color: ${DARKGREY}; }
        `);
        
        $('.HeaderModule__logo').text('Axure 原型测量器');
        $('.SharingLinksModule__modal-block h1').text('分享链接');
        $('.SharingLinksModule__modal-block .InputComponent__label').eq(0).text('分享给开发者');
        $('.SharingLinksModule__modal-block .InputComponent__label').eq(1).text('分享给客户');
        $('.SharingLinksModule__modal-block .ButtonComponent').text('确定');
        $('.TooltipComponent').text('已复制');
    }

    function insertStyle(str) {
        $('head').append(`<style>${str}</style>`);
    }

    function checkObjectExist(obj, callback) {
        var checker = setInterval(function(){
            console.log(window[obj]);
            if (window[obj] != undefined) {
                clearInterval(checker);
                callback();
            }
        }, 50);
    }

    function checkElementExist(el, callback) {
        var checker = setInterval(() => {
            if (el != undefined) {
                clearInterval(checker);
                callback(el);
            }
        }, 50);
    }
    
}());